<template>
	<view class="home_box pdb-122">
		<myNav :height="45" :isBlack="false" />
		<view class="top">
			<view class="left_wrap df flex-col pdl-30 pdr-30">
				<text class="user_title fs46">Hi 尊敬的用户</text>
				<text class="mgt-10 aptitude_title fs24">您的资质已超过99%的用户</text>
			</view>
			<view class="img_wrap">
				<view class="bell">
					<u-image width="49rpx" height="52rpx" class="message_img" :class="shouldShake? 'shake' : ''"
						src="/static/src/home/message_icon.png" mode="aspectFit" :lazy-load="true"></u-image>
					<view class="flex-jc-ac round_num fs25" v-if="messageNum > 0">{{messageNum}}</view>
				</view>

				<u-image width="224rpx" height="224rpx" class="ticket_img" src="/static/src/home/ticket_icon.png"
					mode="aspectFit" :lazy-load="true"></u-image>
			</view>
		</view>
		<view class="df container mgt-39">
			<u-image width="100%" height="770rpx" class="pdl-29 pdr-29" src="/static/src/home/kuang.png"></u-image>
			<view class="container_info flex1 pdl-75 pdr-75 pdt-40">
				<view>
					<text class="title fs30">优质客户专享</text>
					<view class="flex-ac mgt-12">
						<view class="df flex-ac info_text" v-for="(item,index) in exclusiveList" :key="index">
							<image class="check_icon mgr-10" src="/static/src/home/check.png"></image>
							<text class="mgr-40 fs26">{{item.text}}</text>
						</view>
					</view>
				</view>
				<view class="flex-ac flex-col money_info pdt-54">
					<!-- {{idcardVerified}} {{approvalStatus}} -->
					<!-- 未登录|| 登录了,还没提交审核 -->
					<view v-if="['not_logged_in', 'logged_in_unverified', 'approved'].includes(userStatus)">
						<view class="title fs28">最高可借金额(元)</view>
						<view class="money_number flex-jc pdl-32 pdr-32">
							<view class="mgt-24 fs105 money">{{borrow_money?borrow_money:'20,000.00'}}</view>
							<view class="line" :style="{ top: (42 + (item - 1) * 14) + 'rpx' }" v-for="item in 8"
								:key="item"></view>
						</view>
						<view class="mgt-37 pdl-32 pdr-32 fs22 money_interestRate">
							1千元借12个月，日费用{{dailyFee?dailyFee:'1.97%'}}元起，年化
							<text class="interestRate">{{annualizedInterest?annualizedInterest:'7.2'}}%</text>起
						</view>
					</view>
					<!-- 审核中 -->
					<view class="money_number flex-jc pdl-32 pdr-32" v-if="userStatus === 'approving'">
						<view class="mgt-48 fs105 money">审核中... </view>
						<view class="line" :style="{ top: (42 + (item - 1) * 14) + 'rpx' }" v-for="item in 8"
							:key="item"></view>
					</view>
					<!-- 审核失败 -->
					<view class="money_number flex-jc pdl-32 pdr-32" v-if="userStatus === 'rejected'">
						<view class="mgt-48 fs105 money corred">审核失败</view>
						<view class="line" :style="{ top: (42 + (item - 1) * 14) + 'rpx' }" v-for="item in 8"
							:key="item"></view>
					</view>
				</view>
				<!-- 未登录 -->
				<u-button class="borrow_btn mgt-50 fs32" shape="circle" :ripple="true" type="primary"
					throttle-time="2000" @click="handleLogin" v-if="userStatus === 'not_logged_in'">登录查看额度</u-button>
				<!-- 登录没有提交审核 -->
				<u-button class="borrow_btn mgt-50 fs32" shape="circle" :ripple="true" type="primary"
					throttle-time="2000" @click="toBorrow"
					v-if="['logged_in_unverified', 'approved'].includes(userStatus)">去借款</u-button>
				<!-- 未实名认证的 -->
				<u-button class="borrow_btn mgt-50 fs32" shape="circle" :ripple="true" type="primary"
					throttle-time="2000" :loading="true" v-if="userStatus === 'approving'">审核中</u-button>
				<!-- 审核失败 -->
				<!-- <u-button class="borrow_btn mgt-50 fs32" shape="circle" :ripple="true" type="primary"
					throttle-time="2000" @click="toBorrow" v-if="userStatus === 'rejected'">重新申请</u-button> -->
				<u-button class="borrow_btn mgt-50 fs32" shape="circle" :ripple="true" type="primary"
					throttle-time="2000" v-if="userStatus === 'rejected'">审核失败</u-button>
				<view class="introduce flex-ac">
					<image class="step_img" src="/static/src/home/step.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<view class="botttom mgt-20 mgl-30 mgr-30">
			<view class="advantage_top pdt-55">
				<view class="flex-jc advantage_title fs32">平台优势</view>
				<image class="advantage_sign" src="/static/src/home/advantage_sign.png" mode="aspectFit"></image>
			</view>
			<view class="df flex-wrap flex-sb mgt-54 pdl-51 pdr-37 pdb-50">
				<view class="advantage_item flex-ac" :class="index > 1 ? 'mgt-70':''"
					v-for="(item,index) in advantageList" :key="index">
					<image class="advantage_img" :src="item.img" mode="aspectFit"></image>
					<view class="df flex-col mgl-13">
						<text class="title fs28">{{item.title}}</text>
						<text class="desc mgt-4 fs22">{{item.desc}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	<myTabBar :current="0"  @update="handleCurrent"/>
</template>



<script setup lang="ts">
	import { ref, computed } from 'vue';

	import { useInformation } from '@/store/modules/index.ts'

	import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'

	import myNav from "../../components/myNav.vue"
	import myTabBar from "../../components/myTabBar.vue"

	import type { ExclusiveItem, AdvantageItem } from "../../static/src/types/home"

	import { getInfo } from "@/api/customer";

	const user = useInformation()

	const messageNum = ref<number>(1)
	const shouldShake = ref<boolean>(false)
	const intervalId = ref<number | null>(null);
	const exclusiveList = ref<ExclusiveItem[]>([
		{
			text: '尊享额度'
		},
		{
			text: '新客礼券'
		},
		{
			text: '专属客服'
		}
	])
	const borrow_money = ref<string>("")
	const dailyFee = ref<string>("")
	const annualizedInterest = ref<string>("")
	const idcardVerified = ref<string>("")
	const isLoginShow = ref<boolean>(false)
	const approvalStatus = ref<string>("")
	const advantageList = ref<AdvantageItem[]>([
		{
			img: '/static/src/home/advantage_img1.png',
			title: '申请便携',
			desc: '3步申请 快速审核'
		},
		{
			img: '/static/src/home/advantage_img2.png',
			title: '快速放贷',
			desc: '最快放款仅需5分钟'
		},
		{
			img: '/static/src/home/advantage_img3.png',
			title: '消费透明',
			desc: '0手续费，按日计息'
		},
		{
			img: '/static/src/home/advantage_img4.png',
			title: '灵活借还',
			desc: '最高12期、随借随还'
		}
	])
	const userStatus = computed(() => {
		if (!isLoginShow.value) return 'not_logged_in';
		if (idcardVerified.value === 'N' && approvalStatus.value === '0') return 'logged_in_unverified';
		if (idcardVerified.value === 'Y' && approvalStatus.value === '0') return 'approving';
		if (idcardVerified.value === 'Y' && approvalStatus.value === '1') return 'approved';
		if ((idcardVerified.value === 'Y' || idcardVerified.value === 'N') && approvalStatus.value === '2') return 'rejected';
		return 'not_logged_in';
	});

	const startShaking = () => {
		shouldShake.value = true
		setTimeout(() => shouldShake.value = false, 1000)
	}

	// 初始化定时器
	const startInterval = () => {
		if (intervalId.value) clearInterval(intervalId.value)
		startShaking() // 立即执行一次
		intervalId.value = setInterval(startShaking, 20000)
	}
	//停止定时器
	const stopInterval = () => {
		if (intervalId.value) {
			clearInterval(intervalId.value)
			intervalId.value = null
		}
		shouldShake.value = false
	}

	const handleLogin = () => {
		uni.navigateTo({
			url: '/pages/login/index'
		})
	}

	const toBorrow = () => {
		if (approvalStatus.value === "1") {
			uni.navigateTo({
				url: '/pages/borrow/index'
			})
		} else {
			uni.navigateTo({
				url: '/pages/realName/index'
			})
		}
	}

	const getUserInfo = async () => {
		let res = await getInfo(user.phoneNumber)
		if (res) {
			annualizedInterest.value = res.data.annualizedInterest
			approvalStatus.value = res.data.approvalStatus
			idcardVerified.value = res.data.idcardVerified
			if (idcardVerified.value === 'Y' && approvalStatus.value == '1') {
				borrow_money.value = res.data.creditQuota
				uni.setStorageSync('money', borrow_money.value);
			}
			dailyFee.value = (Number(annualizedInterest.value) * 1000 / 365 / 100).toFixed(2);
		}
	}
	
	const handleCurrent=(e:number)=>{
		if(e===1){
			uni.switchTab({
				url: '/pages/my/index'
			})
		}
	}

	onLoad(() => {
		uni.$on('webviewData', (data) => {
			console.log('收到WebView数据:', data)
		})
	})

	onShow(() => {
		if (messageNum.value > 0) {
			startInterval()
		}
		if (user.access_token.token) {
			isLoginShow.value = true
			getUserInfo()
		} else {
			isLoginShow.value = false
		}
	})

	onUnload(() => {
		if (intervalId.value !== null) {
			stopInterval()
		}
	})
</script>

<style lang="scss" scoped>
	@import '@/style/style.scss';

	.home_box {
		height: 100%;
		min-height: 100vh;
		background: linear-gradient(0deg, #F2F3F7 50%, #283BC0 70%);

		.top {
			position: relative;

			.left_wrap {
				.user_title {
					color: #dab79c;
					font-weight: 600;
					font-family: NSimSun;
				}

				.aptitude_title {
					color: #d2ad90;
					font-family: PingFang SC;
				}
			}

			.img_wrap {
				position: absolute;
				top: -40rpx;
				right: 0;

				.bell {
					position: relative;

					.message_img {
						position: absolute;
						right: 80rpx;
					}

					.round_num {
						position: absolute;
						right: 60rpx;
						top: -10rpx;
						min-width: 30rpx;
						height: 30rpx;
						color: #ffffff;
						background: #E62E2E;
						border-radius: 50%;
						font-weight: 500;
						font-family: PingFang SC;
					}

					.shake {
						animation: shake 0.5s ease-in 2;
					}

					@keyframes shake {

						0%,
						100% {
							transform: translateX(0);
						}

						25% {
							transform: translateX(-8rpx);
						}

						50% {
							transform: translateX(8rpx);
						}

						75% {
							transform: translateX(-8rpx);
						}
					}
				}

				.ticket_img {
					position: absolute;
					top: 40rpx;
					right: 40rpx;
				}
			}
		}

		.container {
			box-sizing: border-box;
			position: relative;

			.container_info {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;

				.title {
					color: #5F2E03;
					font-weight: bold;
					font-family: PingFang SC;
				}

				.info_text {
					.check_icon {
						width: 26rpx;
						height: 26rpx;
					}

					& text {
						color: #5F2E03;
						font-weight: 500;
						font-family: PingFang SC;
					}
				}

				.money_info {
					.title {
						color: #2D2E33;
						font-weight: bold;
						font-family: PingFang SC;
					}

					.money_number {
						position: relative;

						.money {
							color: #2D2E33;
							font-weight: bold;
							font-family: DIN;
							z-index: 5;
						}

						.corred {
							color: #DF1010;
						}

						.line {
							position: absolute;
							width: 100%;
							height: 1px;
							background: rgba(222, 224, 230, .3);
						}
					}



					.money_interestRate {
						width: 100%;
						text-align: center;
						background: linear-gradient(to right, transparent 0%, #F3F6FA 50%, transparent 100%);
						line-height: 54rpx;

						.interestRate {
							color: #3A67FA;
							font-weight: 600;
						}
					}
				}

				.borrow_btn {
					width: 95%;
					background: #3C51F2;
					height: 100rpx;
					font-weight: bold;
					font-family: PingFang SC;
					box-shadow: 0px 2rpx 5rpx 1rpx rgba(60, 81, 242, 0.43);
				}

				.introduce {
					width: 100%;
					position: absolute;
					left: 0;
					bottom: 28rpx;

					.step_img {
						width: 100%;
						height: 46rpx;
					}
				}
			}
		}

		.botttom {
			border-radius: 10rpx;
			background: #ffffff;

			.advantage_top {
				position: relative;

				.advantage_title {
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					color: #2D2E33;
					font-weight: bold;
					font-family: PingFang SC;
				}

				.advantage_sign {
					width: 100%;
					height: 22rpx;
				}
			}

			.advantage_item {
				.advantage_img {
					width: 46rpx;
					height: 46rpx;
				}

				.title {
					color: #2D2E33;
					font-weight: bold;
					font-family: PingFang SC;
				}

				.desc {
					color: #878B99;
					font-weight: 500;
					font-family: PingFang SC;
				}
			}

		}
	}
</style>